<template>
    <div class="page-wrapper">
        <div class="container">
            <!-- 学生视图 -->
            <div v-if="isStudent" class="student-view">
                <el-card class="student-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-trophy"></i>
                        <span v-if="luqustatus === '已录取'">{{ teacherName }}同学你好，恭喜你被<span class="highlight">{{ luquzhuanye }}</span>专业录取</span>
                        <span v-else>{{ teacherName }}同学你好，录取待定</span>
                    </div>
                    <el-row :gutter="30">
                        <el-col :span="8">
                            <div class="info-item">
                                <div class="info-label">学号</div>
                                <div class="info-value">{{ teacherCode }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <div class="info-label">姓名</div>
                                <div class="info-value">{{ teacherName }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <div class="info-label">录取专业</div>
                                <div class="info-value highlight">{{ luquzhuanye || '待录取' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8" style="margin-top: 20px;">
                            <div class="info-item">
                                <div class="info-label">录取状态</div>
                                <div class="info-value status-value">{{ luqustatus }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8"  style="margin-top: 20px;">
                            <div class="info-item">
                                <div class="info-label">第一志愿</div>
                                <div class="info-value">{{ applicationOne || '暂未填报' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8"  style="margin-top: 20px;">
                            <div class="info-item">
                                <div class="info-label">第二志愿</div>
                                <div class="info-value">{{ applicationTwo || '暂未填报' }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <!-- 管理员视图 -->
            <div v-else class="admin-view">
                <el-card class="admin-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-user"></i>
                        <span>欢迎您，<strong>{{ teacherName }}</strong></span>
                        <span class="role-badge">{{ userRole }}</span>
                    </div>

                    <el-form :model="form" label-position="left" class="search-form" :label-width="'80px'">
                        <el-row :gutter="30" type="flex" align="middle">
                            <el-col :span="7">
                                <el-form-item>
                                    <span slot="label" class="form-label">班级：</span>
                                    <el-select v-model="selectedClass" placeholder="请选择或搜索班级"
                                        @change="handleClassChange" filterable clearable class="custom-select">
                                        <el-option v-for="cls in classes" :key="cls.id" :label="cls.name"
                                            :value="cls.name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="7">
                                <el-form-item>
                                    <span slot="label" class="form-label">学生：</span>
                                    <el-select v-model="selectedStudent" placeholder="请选择或搜索学生"
                                        :disabled="!selectedClass" filterable clearable class="custom-select"
                                        @change="handleStudentChange">
                                        <el-option v-for="student in filteredStudents" :key="student.id"
                                            :label="student.name" :value="student.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="10">
                                <div class="button-container">
                                    <!-- <el-button type="primary" :disabled="!selectedStudent" @click="handleSearch"
                                        icon="el-icon-search" round class="search-button">
                                        查询
                                    </el-button> -->
                                    <el-button v-show="enrollmentData.length" @click="handleReset"
                                        icon="el-icon-refresh" round class="reset-button">
                                        清空
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div v-if="!enrollmentData.length && !loading" class="empty-state">
                        <div class="empty-content">
                            <i class="el-icon-data-analysis animated-icon"></i>
                            <p class="tip-text">请选择班级和学生进行查询</p>
                        </div>
                    </div>

                    <transition name="fade">
                        <div v-if="enrollmentData.length || loading" class="result-section">
                            <div class="result-header">
                                <i class="el-icon-document"></i>
                                <span>查询结果</span>
                            </div>

                            <el-table :data="paginatedData" border stripe style="width: 100%" v-loading="loading"
                                element-loading-text="正在查询中..." element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(255, 255, 255, 0.9)" class="data-table">
                                <el-table-column prop="studentId" label="学号" width="135" align="center" />
                                <el-table-column prop="studentName" label="姓名"width="80" align="center" />
                                <el-table-column prop="className" label="班级" width="100" align="center" />
                                <el-table-column prop="databaseScore" label="数据库"width="90" align="center" />
                                <el-table-column prop="javaScore" label="Java"width="90" align="center" />
                                <el-table-column prop="programScore" label="程序设计"width="90" align="center" />
                                <el-table-column prop="webScore" label="Web开发"width="90" align="center" />
                                <el-table-column prop="major" label="录取专业" align="center" />
                                <el-table-column label="第一志愿"  align="center">
                                    <template slot-scope="{row}">
                                        {{ row.applicationOne || '暂未填报' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="第二志愿"  align="center">
                                    <template slot-scope="{row}">
                                        {{ row.applicationTwo || '暂未填报' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="录取状态" align="center">
                                    <template slot-scope="{row}">
                                        <div :class="['status-cell', statusClass[row.status]]">
                                            {{ row.status }}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="enrollmentData.length"
                                :page-size="5"
                                @current-change="handlePageChange"
                                style="margin-top: 20px; text-align: right;"
                            />
                        </div>
                    </transition>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isStudent: false, // 身份标识（true-学生）
            selectedClass: null, // 管理员身份选择的班级
            selectedStudent: null, // 管理员身份选择的学生
            loading: false,
            teacherName: "", // 用户姓名
            teacherCode: "", // 用户编号/学号
            classes: [], // 班级列表，从API获取
            allStudents: [], // 学生列表，从API获取
            enrollmentData: [], // 查询结果数据
            statusClass: {
                '已录取': 'status-success',
                '待录取': 'status-warning',
            },
            form: {},
            userInfo: {}, // 当前登录用户信息
            luquzhuanye: "", // 录取专业
            userRole: '', // 用户角色
            applicationOne: "", // 第一志愿
            applicationTwo: "", // 第二志愿
            luqustatus: "", // 录取状态
            currentPage: 1,
        }
    },
    computed: {
        filteredStudents() {
            return this.allStudents.filter(s => s.classId === this.selectedClass)
        },
        paginatedData() {
            const start = (this.currentPage - 1) * 5;
            const end = this.currentPage * 5;
            return this.enrollmentData.slice(start, end);
        },
    },

    created() {
        this.initUserInfo();
        this.getClassNameList();
    },
    methods: {
        /*获取班级列表信息  */
        async getClassNameList() {
            if (this.isStudent) return;
            
            try {
                const res = await this.$get('/api/studentInfo/getClassName');
                if (res.data && Array.isArray(res.data)) {
                    this.classes = res.data.map((className, index) => ({
                        id: index + 1,
                        name: className
                    }));
                }
            } catch (error) {
                console.error('获取班级信息失败:', error);
            }
        },
        
        /* 初始化用户信息*/
        async initUserInfo() {
            try {
                let res = await this.$get('/api/userInfo');
                console.log(res.data);
                this.userInfo = res.data;
                this.teacherName = this.userInfo.nickName || '未知';
                this.teacherCode = this.userInfo.userName || '0';
                this.userRole = this.userInfo.jobTitle[0]
                if (this.userRole === '学生') {
                    this.isStudent = true;
                    this.getStudentOfferInfo();
                }
            } catch (error) {
                console.error('用户信息获取失败:', error);
                this.$message.error('用户信息加载失败');
            }
        },
        
        /* 获取学生的录取信息  */
        async getStudentOfferInfo() {
            if (!this.isStudent) return;
            
            try {
                const res = await this.$get(`/api/studentInfo/ByStudentId`);
                
                if (res.code === 200 && res.data) {
                    console.log(res.data);
                    const studentData = res.data;
                    this.teacherName = studentData.name || "";
                    this.teacherCode = studentData.studentId || "";
                    this.luqustatus = studentData.status === 1 ? '已录取' : '待录取';
                    this.luquzhuanye = studentData.status === 1 ? (studentData.result || "") : '待录取';
                    this.applicationOne = studentData.applicationOne || "";
                    this.applicationTwo = studentData.applicationTwo || "";
                    this.enrollmentData = [{
                        studentId: studentData.studentId || '未知',
                        studentName: studentData.name || '未知',
                        className: studentData.className || '未知',
                        major: studentData.status === 1 ? (studentData.result || '待定') : '待录取',
                        status: studentData.status === 1 ? '已录取' : '待录取',
                        databaseScore: studentData.databaseScore,
                        javaScore: studentData.javaScore,
                        programScore: studentData.programScore,
                        webScore: studentData.webScore
                    }];
                }
            } catch (error) {
                console.error('获取学生录取信息失败:', error);
            }
        },
        
        /* 根据学生ID查询学生信息 */
        async getStudentInfoById() {
            if (this.isStudent) return;
            
            try {
                this.loading = true;
                if (!this.selectedStudent) {
                    this.$message.warning('请先选择要查询的学生');
                    this.loading = false;
                    return;
                }
                const studentId = this.selectedStudent;
                // 查询学生信息
                const res = await this.$get(`/api/studentInfo/ByStudentId?id=${studentId}`);
                
                if (res.code === 200) {
                    // 处理返回的学生信息数据
                    const selectedStudent = this.allStudents.find(s => s.id === studentId);
                    
                    if (selectedStudent) {
                        this.enrollmentData = [{
                            studentId: selectedStudent.studentId || '未知',
                            studentName: selectedStudent.name || '未知',
                            className: this.selectedClass || '未知',
                            major: selectedStudent.status === 1 ? (selectedStudent.result || '待定') : '待录取',
                            status: selectedStudent.status === 1 ? '已录取' : '待录取',
                            databaseScore: selectedStudent.databaseScore,
                            javaScore: selectedStudent.javaScore,
                            programScore: selectedStudent.programScore,
                            webScore: selectedStudent.webScore,
                            applicationOne: selectedStudent.applicationOne || '暂未填报',
                            applicationTwo: selectedStudent.applicationTwo || '暂未填报'
                        }];
                    } else if (res.data) {
                        // 如果在本地找不到学生信息，则使用接口返回的数据
                        this.enrollmentData = [{
                            studentId: res.data.studentId || '未知',
                            studentName: res.data.name || '未知',
                            className: res.data.className || '未知',
                            major: res.data.status === 1 ? (res.data.result || '待定') : '待录取',
                            status: res.data.status === 1 ? '已录取' : '待录取',
                            databaseScore: res.data.databaseScore,
                            javaScore: res.data.javaScore,
                            programScore: res.data.programScore,
                            webScore: res.data.webScore,
                            applicationOne: res.data.applicationOne || '暂未填报',
                            applicationTwo: res.data.applicationTwo || '暂未填报'
                        }];
                    }
                } else {
                    this.$message.error(res.message || '查询学生信息失败');
                }
            } catch (error) {
                console.error('查询学生信息失败:', error);
                this.$message.error('查询学生信息失败，请稍后再试');
            } finally {
                this.loading = false;
            }
        },
        
        /* 班级变更处理  */
        async handleClassChange() {
            if (this.isStudent) return;
            
            this.selectedStudent = null;
            this.enrollmentData = [];
            this.currentPage = 1; // 重置分页
            // 使用班级名称查询学生列表
            const res = await this.$get(`/api/studentInfo/?ClassName=${this.selectedClass}`);
            
            // 如果有返回学生数据，更新学生列表
            if (res.data && Array.isArray(res.data)) {
                // 更新allStudents
                this.allStudents = res.data.map(student => ({
                    id: student.id,
                    name: student.name,
                    classId: this.selectedClass,
                    studentId: student.studentId,
                    databaseScore: student.databaseScore,
                    javaScore: student.javaScore,
                    programScore: student.programScore,
                    webScore: student.webScore,
                    status: student.status,
                    result: student.result,
                    applicationOne: student.applicationOne,
                    applicationTwo: student.applicationTwo
                }));
                // 更新enrollmentData
                this.enrollmentData = this.allStudents.map(student => ({
                    studentId: student.studentId || '未知',
                    studentName: student.name || '未知',
                    className: this.selectedClass || '未知',
                    major: student.status === 1 ? (student.result || '待定') : '待录取',
                    status: student.status === 1 ? '已录取' : '待录取',
                    databaseScore: student.databaseScore,
                    javaScore: student.javaScore,
                    programScore: student.programScore,
                    webScore: student.webScore,
                    applicationOne: student.applicationOne || '暂未填报',
                    applicationTwo: student.applicationTwo || '暂未填报'
                }));
            }
        },
        
        /* 重置查询条件 */
        handleReset() {
            if (this.isStudent) return; 
            
            this.selectedClass = null
            this.selectedStudent = null
            this.enrollmentData = []
        },
        
        /* 执行学生信息查询 */
        handleSearch() {
            if (this.isStudent) return;
            
            this.getStudentInfoById();
        },
        
        /* 学生变更处理*/
        handleStudentChange() {
            if (this.isStudent) return;

            if (this.selectedStudent) {
                this.getStudentInfoById();
            } else {
                this.enrollmentData = [];
                if (this.selectedClass) {
                    // 如果班级有值，重新查询
                    this.handleClassChange();
                } else {
                    // 如果班级没有值，提示用户重新选择
                    this.$message.warning('请先选择班级');
                }
            }
        },
        handlePageChange(page) {
            this.currentPage = page;
        },
        handleDeleteStudent() {
            if (this.isStudent) return;

            // 假设有一个方法来删除学生
            this.deleteStudent(this.selectedStudent);

            // 清空选中的学生和查询结果，但保持班级选择
            this.selectedStudent = null;
            this.enrollmentData = [];

            // 重新获取学生列表
            this.handleClassChange();
        }
    }
}
</script>

<style scoped>
.page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    display: flex;
    justify-content: center;
    padding: 40px 0;
    font-size: 14px;
}

.container {
    width: 91%;
    max-width: 1500px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
}

/* 卡片通用样式 */
.el-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.el-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 卡片头部通用样式 */
.card-header {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    padding: 20px 0;
    border-bottom: 2px solid #ebeef5;
}

.card-header i {
    margin-right: 15px;
    color: #409EFF;
    font-size: 28px;
}

.card-header strong {
    color: #409EFF;
    font-weight: 700;
}

.role-badge {
    margin-left: 20px;
    background-color: #f0f5ff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 18px;
    color: #409EFF;
    font-weight: 500;
}

/* 学生视图样式 */
.student-view {
    margin: 20px auto;
}

.student-card {
    background: linear-gradient(to right, #ffffff, #f9fafc);
    padding: 10px;
}

.info-item {
    padding: 25px;
    border-radius: 12px;
    background-color: #f9fafc;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(to bottom, #409EFF, #64b5f6);
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.info-item:hover::before {
    height: 100%;
}

.info-label {
    color: #606266;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 500;
}

.info-value {
    color: #303133;
    font-size: 18px;
    font-weight: 600;
}

.highlight {
    color: #409EFF;
    font-weight: 700;
    font-size: 26px;
}

.status-value {
    color: #67C23A;
    font-weight: 700;
    font-size: 20px;
}

/* 管理员视图样式 */
.admin-view {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.admin-card {
    background: linear-gradient(to right, #ffffff, #f9fafc);
    padding: 10px;
}

.search-form {
    margin-top: 15px;
    padding: 0 20px;
}

/* 表单标签样式优化 */
.form-label {
    font-weight: 600;
    color: #303133;
    font-size: 14px;
    background: -webkit-linear-gradient(#409EFF, #64b5f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 5px;
}

.custom-select {
    width: 100%;
}

.custom-select .el-input__inner {
    border-radius: 10px;
    height: 48px;
    border-color: #dcdfe6;
    font-size: 16px;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    margin-top: -25px;
}

.search-button,
.reset-button {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.search-button {
    background: linear-gradient(135deg, #409EFF 0%, #3a8ee6 100%);
    border: none;
}

.search-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(64, 158, 255, 0.5);
    background: linear-gradient(135deg, #4aa3ff 0%, #4095eb 100%);
}

.reset-button {
    margin-left: 20px;
}

.reset-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* 空状态样式 */
.empty-state {
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.empty-content {
    text-align: center;
}

.animated-icon {
    font-size: 90px;
    color: #409EFF;
    display: block;
    margin-bottom: 30px;
    animation: float 3s ease-in-out infinite;
}

.tip-text {
    color: #606266;
    font-size: 22px;
    font-weight: 500;
}

/* 结果区域样式 */
.result-section {
    margin-top: 30px;
    padding: 0 20px 20px;
}

.result-header {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    padding: 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

.result-header i {
    margin-right: 10px;
    color: #409EFF;
    font-size: 24px;
}

.data-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    font-size: 16px;
}

.data-table .el-table__header-wrapper th {
    background-color: #f5f7fa;
    color: #303133;
    font-weight: 600;
    padding: 10px 0;
    font-size: 14px;
}

.data-table .el-table__row {
    transition: all 0.3s;
    height: 60px;
}

.data-table .el-table__row td {
    font-size: 12px;
    padding: 10px 0;
}

.data-table .el-table__row:hover>td {
    background-color: #f0f5ff !important;
}

.status-cell {
    font-weight: 700;
    font-size: 18px;
    padding: 5px 0;
}

.status-success {
    color: #67C23A;
}

.status-warning {
    color: #E6A23C;
}

.status-danger {
    color: #F56C6C;
}

/* 动画 */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    .container {
        width: 90%;
    }

    .card-header {
        font-size: 22px;
    }

    .info-value {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: 95%;
    }

    .button-container {
        justify-content: flex-start;
        margin-top: -25px;
    }

    .card-header {
        font-size: 20px;
    }

    .info-value {
        font-size: 18px;
    }

    .role-badge {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        width: fit-content;
    }
}
</style>